<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CodeSynapse测试页面</title>
    <script src="https://cdn.jsdelivr.net/npm/sockjs-client@1/dist/sockjs.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/stomp.js/2.3.3/stomp.min.js"></script>
    <style>
        body { margin: 20px; font-family: "Microsoft YaHei", Arial, sans-serif; }
        textarea { 
            width: 100%; 
            height: 200px; 
            margin: 10px 0; 
            font-family: Consolas, monospace;
            font-size: 14px;
            padding: 10px;
        }
        button { 
            padding: 10px 20px; 
            background-color: #4CAF50; 
            color: white; 
            border: none; 
            cursor: pointer;
            font-size: 16px;
        }
        #response { 
            border: 1px solid #ddd; 
            padding: 10px; 
            margin-top: 10px;
            white-space: pre-wrap;
            font-family: Consolas, monospace;
            background-color: #f5f5f5;
        }
        #status {
            margin-top: 10px;
            padding: 10px;
            border-radius: 4px;
        }
        .connected {
            background-color: #dff0d8;
            color: #3c763d;
        }
        .disconnected {
            background-color: #f2dede;
            color: #a94442;
        }
    </style>
</head>
<body>
    <h2>代码补全测试</h2>
    <div id="status">连接状态: 未连接</div>
    <textarea id="codeInput" placeholder="在这里输入代码...&#10;示例：&#10;public class User {&#10;    private String username;&#10;    private String email;&#10;    // 请生成getter和setter方法&#10;}"></textarea>
    <button onclick="sendCode()">获取补全建议</button>
    <div id="response"></div>

    <script>
        let stompClient = null;
        let connectionStatus = document.getElementById('status');

        function connect() {
            let socket = new SockJS('/ws');
            stompClient = Stomp.over(socket);
            stompClient.connect({}, function(frame) {
                console.log('Connected: ' + frame);
                connectionStatus.textContent = '连接状态: 已连接';
                connectionStatus.className = 'connected';
                stompClient.subscribe('/topic/completion', function(response) {
                    console.log('Received: ', response);
                    document.getElementById('response').textContent = response.body;
                });
            }, function(error) {
                console.error('Connection error: ', error);
                connectionStatus.textContent = '连接状态: 连接失败';
                connectionStatus.className = 'disconnected';
            });
        }

        function sendCode() {
            let code = document.getElementById('codeInput').value;
            if (stompClient && stompClient.connected) {
                console.log('Sending code: ', code);
                stompClient.send("/app/complete", {}, code);
            } else {
                alert('WebSocket未连接，请等待连接建立或刷新页面重试');
            }
        }

        connect();
    </script>
</body>
</html> 